Subir y bajar con efecto deslizante

Hace tiempo añadí una imagen justo al final del blog en el lateral derecho aún sigue ahí aunque la imagen la fui cambiando, se trata de una imagen que se fija al fondo y crea un efecto deslizante que nos lleva a inicio, poco después ese mismo efecto lo añadía en el footer de las entradas.

La idea de ese efecto surgió a raíz de unas explicaciones de J.Miur y posteriormente en esta entrada explicaba los pasos a seguir para añadir dicho efecto.

Voodoo me pregunta como añadir no una sino dos imágenes al final del blog, una que se deslice hacia arriba y otra que se deslice abajo, la idea es buena y los resultados quedan estéticamente agradables.

Antes de añadir las imágenes necesitamos incluir en la plantilla Prototype y los efectos de Scriptaculous lo conseguiremos añadiendo justo antes de </head> lo siguiente (si lo añadimos anteriormente para algún otro efecto no será necesario añadirlo otra vez)

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("prototype", "1.6.1.0");
google.load("scriptaculous", "1.8.3");
</script>

Guardamos los cambios para no modificar nada sin darnos cuenta y nos situamos al final de la plantilla justo antes de </body>(no es necesario expandir la plantilla) allí añadimos lo siguiente:

<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img alt='Subir' border='0' src='url-imagen-subir' style='position:fixed; bottom:0; right:0;'/></a>

<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img alt='Bajar' border='0' src='url-imagen-bajar' style='position:fixed; bottom:40px; right:0;'/></a>

Donde url-imagen-bajar añadimos la imagen que hace la función de bajar.
En url-imagen-subir añadiremos la url de la imagen que hace la función de subir.

Entre las dos imágenes podemos dejar mayor o menor espacio, lo podemos modificar en la imagen de "bajar" donde dice bottom:40px; aumentando o disminuyendo ese valor.

Una aclaración, a más distancia entre footer y outer-wrapper mejor apreciación del efecto.

Este es el resultado también pueden verlo en funcionamiento en el blog de Voodoo donde el efecto se ve con más claridad debido a ese mayor espacio entre footer y outer-wrapper que antes comentaba